var Index = function() {

    // Glass library location.
    var glassPath = '../img/glass/',
        modelPath = '../img/model/',
        move = false;
    
    // Load model list.
    $.getJSON('../json/model.json', function(result) {
        $.each(result, function(i, field) {
            var _html = '<li><a href="javascript:void(0);" title="' + field.name + '" data-array="' + i + '" style="background-image:url(' + modelPath + field.img + ');"></a></li>';
            $('#modelList').append(_html);
        });
        // Set model image.
        $('#modelList li').bind('click', function(event) {
            var arrID = $(this).children('a').attr('data-array');
            setModelImg(modelPath + queryModel(arrID).img);
        });
        // Query model.
        function queryModel(_arrID) {
            return result[_arrID];
        }
    });
    
    // Load glass list.
    $.getJSON('../json/glass.json', function(result) {
        $.each(result, function(i, field) {
            var _html = '<li><a href="javascript:void(0);" title="' + field.name + '" data-array="' + i + '" style="background-image:url(' + glassPath + field.img + ');"></a></li>';
            $('#glassList').append(_html);
        });
        // Set glass.
        $('#glassList li').bind('click', function(event) {
            if($('#editZone').css('background-image') == 'none') {
                alert('请先上传图片或选择模特!');
                $('.menu-bar li').eq(0).trigger('click');
            }else {
                var arrID = $(this).children('a').attr('data-array');
                setGlass(queryGlass(arrID).img);
                $('.menu-bar li').eq(3).trigger('click');
                $('.buy-btn').show().attr('href', queryGlass(arrID).url);
            }
        });
        // Query glass.
        function queryGlass(_arrID) {
            return result[_arrID];
        }
    });
    
    $(document).ready(function() {
        setContentHeight();
        $('.upload-box .fix').css('margin-top', getMiddle($('.upload-box .fix')) + 'px');
        $('#modelList').css('margin-top', getMiddle($('#modelList')) + 'px');
        $('#glassList').css('margin-top', getMiddle($('#glassList')) + 'px');
    });
    
    // Toolbar.
    $('.menu-bar li').on('click', function(event) {
        var _self = $(this).children('a'),
            _target = $('.' + _self.attr('data-target'));
        _target.parents().closest('.content').find('.wrap-box').hide();
        _target.show();
        $(this).parent().find('li').removeClass('curr');
        $(this).addClass('curr');
        $('.header .title').html(_self.attr('data-title'));
    });

    // Popup image upload form.
    $('#uploadPicBtn').on('click', function(event) {
        $('#uploadElement').trigger('click');
    });
    
    // Bind background element.
    $('#tmpPIC').bind('load', function(event) {
        var userImg = $(this).attr('src');
        setModelImg(userImg);
    });
    
    // Switch to model page.
    $('#choiceModelBtn').on('click', function(event) {
        $('.menu-bar li').eq(1).trigger('click');
    });
    
    // Zoom & zoom out.
    $('#zoom').on('click', function(event) {
        zoomElement($('#glassElement'), 'zoom');
    });
    $('#zoomOut').on('click', function(event) {
        zoomElement($('#glassElement'), 'zoomout');
    });
    function zoomElement(_obj, _action) {
        var _zoom = parseFloat(_obj.attr('data-zoom'));
        if(_action == 'zoom') {
            _zoom = _zoom + 0.05;
            if(_zoom > 2) _zoom = 2;
        }else if(_action = 'zoomout') {
            _zoom = _zoom - 0.05;
            if(_zoom < 0.5) _zoom = 0.5;
        }
        _obj.attr('data-zoom', _zoom);
        _obj.attr('style', '-webkit-transform: scale(' + _zoom + '); transform: scale(' + _zoom + ');')
    }
    
    // Move glass.
    $('#editZone').bind('touchstart', function(event) {
        move = true;
    }).bind('touchend', function(event) {
        move = false;
    }).bind('touchmove', function(event) {
        if(move) {
            var _self = $(this).children('#glassElement'),
                _x = event.touches[0].pageX,
                _y = event.touches[0].pageY;
            dragElement(_self, _x, _y)
        }
    });
    function dragElement(_obj, _x, _y) {
        var _parent = _obj.parent(),
            top = _parent.offset().top,
            left = _parent.offset().left,
            x = (_x - left) - (_obj.width() / 2),
            y = (_y - top) - (_obj.height() / 2);
        _obj.css({
            'left': x + 'px',
            'top': y + 'px'
        });
        return false;
    }
    
    // Content height.
    function setContentHeight() {
        var _headerHeight = $('.header').height(),
            _footerHeight = $('.footer').height(),
            _windowHeight = $(window).height();
        $('.content').css('height', (_windowHeight - (_headerHeight + _footerHeight)) + 'px');
    }
    
    // Get middle.
    function getMiddle(_obj) {
        var _parentHeight = _obj.parent().height(),
            _objHeight = _obj.height();
        return _parentHeight / 2 - _objHeight / 2;
    }
    
    // Set model image.
    function setModelImg(_src) {
        $('#editZone').css('background-image', 'url("' + _src + '")');
        $('.menu-bar li').eq(2).trigger('click');
    }
    
    // Set glass image.
    function setGlass(_img) {
        $('#glassElement').attr('src', glassPath + _img);
    }    
}();

// Save upload image to temp file.
window.onload = function () {
    new uploadPreview({ UpBtn: "uploadElement", ImgShow: "tmpPIC" });
}